<template>
    <div>
        <public-com></public-com>
        <div>
            <div class="flex box1">
                <p @click="tuichu()"> &lt; 退出 </p>
                <h1>反馈信箱</h1>
            </div>
            <div class="flex box2">
                <div class="zuo">
                    <h2>尊敬的来信人，你好</h2>
                    <p>为进一步增进学校管理的密切联系，更好地解决群众普遍关心的实际问题，学校专门设立了"书记信箱"、"校长信箱"（以下简称"信箱"）。为了使"信箱"更好地发挥作用，请您在使用时注意以下几点：<br /><br /><br />
                        1、学校欢迎广大师生员工就北大发展建设中存在的问题、各单位工作人员的职务行为等提出意见和建议。<br /><br />
                        2、来信内容应遵守中华人民共和国法律、法规，并应客观真实。<br /><br />
                        3、建议您参照校领导分工，根据所反映问题将信件投送给相应领导，以便信件得到更有针对性的处理。<br /><br />
                        4、建议您尽量详细地描述所反映问题，并填写真实姓名和联系方式，以便及时反馈办理情况。<br /><br />
                        5、对于已经答复过的事项，"信箱"可不予受理，请勿就答复过的问题重复提交信件。</p>
                </div>
                <div class="you flexd colors" style="color:white;">
                    <h2>反馈信箱</h2>
                    <div class="fontcolor">
                        <span>收信人：</span>
                        <input type="text" value="安保处" class="colors bor fontcolor" disabled="disabled" />
                    </div><br />
                    <div class="fontcolor">
                        <span>姓名：</span>
                        <input type="text" placeholder="姓名" class="colors bor fontcolor" v-model="name" />
                    </div><br />
                    <div class="fontcolor">
                        <span>电话：</span>
                        <input type="phone" placeholder="电话" class="colors bor fontcolor" v-model="phone" />
                    </div><br />
                    <div class="fontcolor">
                        <span>反馈内容:</span>
                        <textarea class="text fontcolor" aria-placeholder="请输入反馈意见" v-model="context"></textarea>
                    </div><br />
                    <el-button type="primary" @click="tijiao()">反馈</el-button>
                </div>
            </div>
        </div>
        <footer-com></footer-com>
    </div>
</template>

<script>
import PublicCom from "@/components/PublicCom.vue";
import FooterCom from "@/components/FooterCom.vue";
import axios from 'axios';
export default {
    components: {
        PublicCom,
        FooterCom,
    },
    data() {
        return {
            name: '',
            phone: '',
            context: ''
        };
    },
    components: {
        PublicCom,
        FooterCom,
    },
    methods: {
        tuichu() {
            this.$router.go(-1);
        },
        tijiao() {
            axios.get("api/Letter/insertOne.do", {
                params: {
                    name: this.name,
                    phone: this.phone,
                    context: this.context
                }
            }).then((result) => {
                console.log(result);
            })
        }
    }
};
</script>

<style scoped>
.box1 {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 50px;
}

.box1>p {
    width: 45%;
}

.box2 {
    width: 70%;
    margin: 0 auto;

}

.zuo {
    width: 45%;
    height: 600px;
    background-image: url('https://www.pku.edu.cn/Public/static/themes/image/jjl/mailbox_form1.jpg');
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
}

.zuo>p {
    margin: 50px 20px 20px 20px;
}

.you {
    width: 45%;
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
    background-color: #94070a;
}

.you>h2 {
    margin-bottom: 50px;
}

.text {
    height: 70px;
    background-color: #94070a;
}

.bor {
    border: none;
}

.colors {
    background-color: #94070a;
}

.fontcolor {
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
}

.fontcolor span {
    width: 100px;
}

.el-button--primary {
    color: #FFF;
    background-color: #e30001;
    border-color: #e30001;
    border-radius: 10px;
}
</style>